<template>
    <div class="my-pagination">
      <el-pagination
        v-model:currentPage="pageQuery.page"
        v-model:page-size="pageQuery.pre_size"
        :page-sizes="[5, 10, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-backtop id="goBack" v-show="false" :right="100" :bottom="100" />
    </div>
</template>
<script>

export default{
    name:"FsPagination"
};
</script>
<script setup>
import {defineProps,defineEmits, reactive} from "vue";
import { scrollTo } from "@/utils/scroll-to";
const emit=defineEmits(["getTableList","update:pageQuery"]);
const props = defineProps({
    pageQuery:{
        required:true,
        type:Object,
        default:()=>{}
    }
});
const setPageQuery=(pageQuery)=>{
  emit("update:pageQuery",pageQuery);
  emit("getTableList");
  setTimeout(()=>{
    scrollTo(0,0);
  },0);
};
const handleSizeChange = (size) => {
  const newPageQuery = reactive({
    page:props.pageQuery.page,
    pre_size:size,
    total:props.pageQuery.total
  });
  setPageQuery(newPageQuery);
};
const handleCurrentChange = (page) => {
  const newPageQuery = reactive({
    page:page,
    pre_size:props.pageQuery.pre_size,
    total:props.pageQuery.total
  });
  setPageQuery(newPageQuery);
};
</script>
<style lang="scss" scoped>
.my-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>